<template>
  <div class="paramConfig">
    <MetaSearchForm @on-search="tableSearch">
      <el-form
        ref="dataManagement_form"
        :model="modelSearch"
        class="dataConfigure_searchFrom"
      >
        <el-form-item
          label="模型配置名称"
          class="dataConfigure_searchFromItem"
          label-width="150px"
        >
          <el-input v-model="modelSearch.configName"></el-input>
        </el-form-item>
        <el-form-item
          label="模型配置时间"
          class="dataConfigure_searchFromItem"
          label-width="150px"
        >
          <el-date-picker
            v-model="modelSearch.dateBetween"
            type="daterange"
            range-separator="-"
            value-format="yyyy-MM-dd"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
    </MetaSearchForm>
    <MetaPageTable
      ref="paramConfigureTable"
      class="dataConfigure_table"
      table-title="模型配置列表"
      :is-auto-req="true"
      :req-url="reqUrl"
      :req-data="modelSearch"
      req-method="post"
      :display-item="displayItem"
      :btn-group="btnGroup"
      @btnClick="tableBtnClick"
      :line-btn-group="lineBtnGroup"
      @lineBtnClick="tableInlineBtnClick"
    />
    <el-dialog
      :visible.sync="newModelDialog"
      width="80%"
      modal
      center
      :close-on-click-modal="false"
      :title="dialogTitle"
      :before-close="cancelConfigure"
    >
      <div>
        <el-form
          :model="modelConfigureData"
          label-width="170px"
          ref="modelDataForm"
          :rules="modelDataRules"
          :validate-on-rule-change="false"
        >
          <el-form-item
            label="Config_Name"
            prop="configName"
            v-if="!(modelConfigureData.id && modelConfigureData.id !== '')"
          >
            <el-input
              v-model="modelConfigureData.configName"
              style="width: 80%"
              @input="change($event)"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="Config_Name"
            prop="configName"
            v-if="modelConfigureData.id && modelConfigureData.id !== ''"
          >
            <el-input
              v-model="modelConfigureData.configName"
              style="width: 80%"
              @input="change($event)"
              disabled
            ></el-input>
          </el-form-item>

          <el-form-item label="Band_Del">
            <div class="bandDel">
              <el-form-item label="Head" label-width="60px">
                <el-input
                  v-model="modelConfigureData.head"
                  @input="change($event)"
                ></el-input> </el-form-item
              ><el-form-item label="Tail" label-width="60px">
                <el-input
                  v-model="modelConfigureData.tail"
                  @input="change($event)"
                ></el-input>
              </el-form-item>
            </div>
          </el-form-item>

          <el-form-item label="Model" prop="model">
            <el-select
              v-model="modelConfigureData.model"
              placeholder="请选择参数"
              multiple
              clearable
              style="width: 80%"
              @change="selectParam($event)"
            >
              <el-option
                v-for="item in modelList"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="Model_Para">
            <div class="bandTitle">
              <el-tabs v-model="paramChooseItem">
                <el-tab-pane
                  v-for="item in paramTabList"
                  :key="item"
                  :label="item"
                  :name="item"
                >
                  <div class="bandTable">
                    <div v-if="item == 'Band'"></div>
                    <div v-if="item == 'MLR'">
                      <el-form-item label="Band_Num" label-width="100px">
                        <el-input
                          v-model="modelConfigureData.mlrBandNum"
                          @input="change($event)"
                        ></el-input>
                      </el-form-item>
                    </div>
                    <div v-if="item == 'PLSR'" class="bandTablePlsr">
                      <el-form-item label="Band_Num" label-width="100px">
                        <el-input
                          v-model="modelConfigureData.plsrBandNum"
                          @input="change($event)"
                        ></el-input> </el-form-item
                      ><el-form-item label="Pc" label-width="80px">
                        <el-input
                          v-model="modelConfigureData.plsrPc"
                          @input="change($event)"
                        ></el-input>
                      </el-form-item>
                    </div>
                  </div>
                </el-tab-pane>
              </el-tabs>
            </div>
          </el-form-item>

          <el-form-item label="Remarks" prop="remark">
            <el-input
              v-model="modelConfigureData.remark"
              style="width: 80%"
              @input="change($event)"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer">
        <el-button @click="cancelConfigure">取 消</el-button>
        <el-button type="primary" @click="saveConfigure('modelDataForm')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import MetaPageTable from "../components/MetaPageTable";
import MetaSearchForm from "../components/MetaSearchForm";
import deepClone from "../utils/deepClone";
import { validateLetterNumberWord, validateLetterNumber } from "../utils/validate";

import utils from "../utils/utils";
export default {
  name: "paramConfig",
  components: {
    MetaPageTable,
    MetaSearchForm,
  },
  data() {
    let checkName = (rule, value, callback) => {
      if (!value) {
        callback(new Error("必填项不可为空"));
      } else {
        if (value.length > 50) {
          callback(new Error("内容录入过长"));
        } else if (!validateLetterNumberWord(value)) {
          callback(new Error("请准确输入名称"));
        } else {
          return callback();
        }
      }
    };
    let checkNull = (rule, value, callback) => {
      if (value.length > 50) {
        callback(new Error("内容录入过长"));
      } else if (!validateLetterNumberWord(value)) {
        callback();
      } else {
        return callback();
      }
    };
    return {
      newModelDialog: false,
      modelSearch: {
        configName: "",
        dateBetween: "",
      },
      dialogTitle: "",
      modelConfigureData: {
        id: "",
        configName: "",
        head: "",
        tail: "",
        model: "",
        plsrBandNum: "",
        mlrBandNum: "",
        plsrPc: "",
        remark: "",
      },
      modelDataRules: {
        configName: [
          {
            required: true,
            validator: checkName,
            trigger: "blur",
          },
        ],
        model: [{ required: true, message: "请选择模型", trigger: "blur" }],
        modelParam: [{ required: true, message: "请输入模型参数", trigger: "change" }],
        remark: [{ message: "内容录入过长", max: 50, trigger: "blur" }],
      },
      paramChooseItem: 0,
      reqUrl: process.env.PROGOO_GATE_WATER + "admin/modelConfig/list",
      displayItem: [
        {
          label: "名称",
          prop: "configName",
        },
        {
          label: "Band_Del_Head",
          prop: "head",
        },
        {
          label: "Band_Del_Tail",
          prop: "tail",
        },
        {
          label: "Band",
          prop: "band",
          type: "if",
          format: {
            Band: "√",
            null: "×",
            "": "×",
          },
        },
        {
          label: "MLR_Band_Num",
          prop: "mlrBandNum",
        },
        {
          label: "PLSR_Band_Num",
          prop: "plsrBandNum",
        },
        {
          label: "PLSR_Pc",
          prop: "plsrPc",
        },
        {
          label: "配置时间",
          prop: "createDate",
          width: "200",
        },
        {
          label: "备注",
          prop: "remark",
        },
      ],
      btnGroup: [
        {
          id: "newModel",
          title: "新建",
        },
      ],

      lineBtnGroup: [
        {
          id: "bind",
          title: "绑定",
          hideCheck: this.showBindBtn,
        },
        {
          id: "unbind",
          title: "解绑",
          hideCheck: this.showUnbindBtn,
        },
        {
          id: "edit",
          title: "编辑",
        },
        {
          id: "iteration",
          title: "迭代",
        },

        {
          id: "delete",
          title: "删除",
        },
      ],
      modelList: ["Band", "MLR", "PLSR"],
      paramTabList: [],
    };
  },
  mounted() {
  },
  methods: {
    tableBtnClick(item) {
      if (item.button === "newModel") {
        //新建模型
        this.newModelDialog = true;
        this.dialogTitle = "新建模型配置";
      }
    },
    tableInlineBtnClick(item) {
      if (item.button === "bind") {
        this.$fetch({
          url: process.env.PROGOO_GATE_WATER + "admin/modelConfig/bind",
          method: "post",
          data: {
            id: item.rows.id,
          },
        }).then((res) => {
          if (res.data.code === 200) {
            if (res.data.message == "成功") {
              this.$message({
                type: "success",
                message: "操作成功!",
              });
              this.$nextTick(() => {
                this.$refs.paramConfigureTable.formDataInit(true);
              });
            }
          } else {
            this.$notify.error({
              title: "错误",
              message: res.data.message,
            });
          }
        });
      } else if (item.button === "unbind") {
        this.$fetch({
          url: process.env.PROGOO_GATE_WATER + "admin/modelConfig/bind",
          method: "post",
          data: {
            id: item.rows.id,
          },
        }).then((res) => {
          if (res.data.code === 200) {
            if (res.data.message == "成功") {
              this.$message({
                type: "success",
                message: "操作成功!",
              });
              this.$nextTick(() => {
                this.$refs.paramConfigureTable.formDataInit(true);
              });
            }
          } else {
            this.$notify.error({
              title: "错误",
              message: res.data.message,
            });
          }
        });
      } else if (item.button === "edit") {
        this.newModelDialog = true;
        this.dialogTitle = "编辑模型配置";
        this.modelConfigureData.id = item.rows.id;
        this.modelConfigureData.configName = item.rows.configName;
        this.modelConfigureData.head = item.rows.head;
        this.modelConfigureData.mlrBandNum = item.rows.mlrBandNum;
        this.modelConfigureData.plsrBandNum = item.rows.plsrBandNum;
        this.modelConfigureData.plsrPc = item.rows.plsrPc;
        this.modelConfigureData.tail = item.rows.tail;
        this.modelConfigureData.remark = item.rows.remark;
        this.modelConfigureData.model = item.rows.model;
        this.modelConfigureData.createDate = item.rows.createDate;
        this.paramTabList = item.rows.model;
      } else if (item.button === "iteration") {
        this.dialogTitle = "迭代模型配置";
        this.newModelDialog = true;
        this.modelConfigureData.configName = item.rows.configName;
        this.modelConfigureData.head = item.rows.head;
        this.modelConfigureData.mlrBandNum = item.rows.mlrBandNum;
        this.modelConfigureData.plsrBandNum = item.rows.plsrBandNum;
        this.modelConfigureData.plsrPc = item.rows.plsrPc;
        this.modelConfigureData.tail = item.rows.tail;
        this.modelConfigureData.remark = item.rows.remark;
        this.modelConfigureData.model = item.rows.model;
        this.paramTabList = item.rows.model;
      } else if (item.button === "delete") {
        this.$confirm("确认删除当前模型？", "确认删除?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.$fetch({
              url: process.env.PROGOO_GATE_WATER + "admin/modelConfig/delete",
              method: "delete",
              data: {
                id: item.rows.id,
                bind: item.rows.bind,
              },
            }).then((res) => {
              if (res.data.code === 200) {
                if (res.data.message == "成功") {
                  this.$message({
                    type: "success",
                    message: "操作成功!",
                  });
                  this.$nextTick(() => {
                    this.$refs.paramConfigureTable.formDataInit(true);
                  });
                } else if (res.data.message == "已占用") {
                  this.$notify.warning({
                    title: "已绑定",
                    message: "模型配置已绑定，请解绑后删除！",
                  });
                }
              } else {
                this.$notify.error({
                  title: "错误",
                  message: res.data.message,
                });
              }
            });
          })
          .catch(() => {});
      }
    },
    tableSearch() {
      let param = {};
      for (let key in this.modelSearch) {
        if (key === "dateBetween") {
          param.dateStart =
            this.modelSearch[key] && this.modelSearch[key].length > 0
              ? this.modelSearch[key][0] + " 00:00:00"
              : "";
          param.dateEnd =
            this.modelSearch[key] && this.modelSearch[key].length > 0
              ? this.modelSearch[key][1] + " 23:59:59"
              : "";
        } else {
          param[key] = this.modelSearch[key];
        }
      }
      this.modelSearch = param;
      this.$nextTick(() => {
        this.$refs.paramConfigureTable.formDataInit(true);
      });
    },
    showBindBtn(rowData) {
      if (rowData.bind === "0") {
        return true;
      } else {
        return false;
      }
    },
    showUnbindBtn(rowData) {
      if (rowData.bind === "1") {
        return true;
      } else {
        return false;
      }
    },
    change(e) {
      //强制刷新组件
      this.$forceUpdate();
    },
    selectParam(event) {
      this.paramTabList = event; //获取option对应的value值
    },
    saveConfigure(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //调接口 接口调成功后清空
          for (let i in this.modelConfigureData.model) {
            this.modelConfigureData[
              this.modelConfigureData.model[i].toLowerCase()
            ] = this.modelConfigureData.model[i];
          }
          if (this.modelConfigureData.mlr != "MLR") {
            this.modelConfigureData.mlrBandNum = "";
          } else if (this.modelConfigureData.plsr != "PLSR") {
            this.modelConfigureData.plsrPc = "";
            this.modelConfigureData.plsrBandNum = "";
          }
          this.$fetch({
            url: process.env.PROGOO_GATE_WATER + "admin/modelConfig/preserve",
            method: "post",
            data: this.modelConfigureData,
          }).then((res) => {
            if (res.data.code === 200) {
              if (res.data.result == "名称重复") {
                this.$notify.warning({
                  title: "名称重复",
                  message: "请重新命名!",
                });
              } else {
                this.$refs.paramConfigureTable.formDataInit(true);
                this.modelConfigureData.equipmentId = "";
                this.cancelConfigure();
              }
            }
          });
        } else {
          // this.$notify.error({
          //   title: "失败",
          // });
        }
      });
    },
    cancelConfigure() {
      this.newModelDialog = false;
      this.modelConfigureData = {
        id: "",
        configName: "",
        head: "",
        tail: "",
        model: "",
        plsrBandNum: "",
        mlrBandNum: "",
        plsrPc: "",
        remark: "",
      };
      this.paramTabList = [];
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
.paramConfig {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 15px;
  overflow-y: scroll;
  .dataConfigure_table {
    width: 100%;
    overflow-y: unset;
  }
  .dataConfigure_searchFrom {
    width: 100%;
  }
  .dataConfigure_searchFromItem {
    float: left;
  }
  .bandDel {
    display: flex;
    .el-form-item {
      .el-form-item__label {
        margin: 0 !important;
      }
    }
  }
  .bandTitle {
    width: 80%;
    .bandTable {
      width: 100%;
      display: flex;
      flex-direction: column;
      .bandTablePlsr {
        display: flex;
        .el-form-item {
          .el-form-item__label {
            margin: 0 !important;
          }
        }
      }
    }
  }
}
</style>
